<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="icon" href="images/chang.ico">
	<!-- jquery -->
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<!-- 动画库 -->
	<link rel="stylesheet" href="./css/animate.min.css">
	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" href="css/common.css">
	<link rel="stylesheet" href="./css/video.css">
	<!-- Bootstrap -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
		integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
	<!-- 点击爱心 -->
	<script src="./js/love.js"></script>
	<!-- L2Dwidget.js L2D网页动画人物 -->
	<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
	<script>
		L2Dwidget.init({
			"model": {
				"jsonPath": "https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json",
				"scale": 1,
				"hHeadPos": 0.5,
				"vHeadPos": 0.618
			},
			"display": {
				"position": "right",
				"width": 100,
				"height": 150,
				"hOffset": -58,
				"vOffset": -53
			},
			"mobile": {
				"show": true,
				"scale": 0.5
			},
			"react": {
				"opacityDefault": 1.5,
				"opacityOnHover": 0.2
			}
		});
	</script>
	<title>视频</title>

</head>

<body>
	<!-- 头部 -->
	<header>
		<nav class="navbar navbar-inverse">
			<div class="container-fluid">
				<!-- Brand and toggle get grouped for better mobile display -->
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
						data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="./index.html">首页</a>
				</div>

				<!-- Collect the nav links, forms, and other content for toggling -->
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li><a href="./photos.html?id=1">相册</a></li>
						<li><a href="./video.html">视频</a></li>
						<li><a href="./game.html">游戏</a></li>
					</ul>
					<form class="navbar-form navbar-left">
						<div class="form-group">
							<input type="text" class="form-control searchInput" placeholder="Search">
						</div>
						<button type="submit" class="btn btn-default" onclick="search()">搜索</button>
					</form>
					<ul class="nav navbar-nav navbar-right">
						<li><a href="#">Link</a></li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
								aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
							<ul class="dropdown-menu">
								<li><a href="#">Action</a></li>
								<li><a href="#">Another action</a></li>
								<li><a href="#">Something else here</a></li>
								<li role="separator" class="divider"></li>
								<li><a href="#">Separated link</a></li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
		</nav>
	</header>
	<main>
		<div class="row view">
			<div class="col-md-6 animated fadeInDown">
				<!-- <video src="#" controls></video> -->
				<div class="embed-responsive embed-responsive-16by9">
					<iframe class="embed-responsive-item" src="#"></iframe>
				</div>
			</div>
		</div>
		<div id="buttons" class="row controls animated fadeInUp">
			<script>
				let list = ['stay-b.mp4', 'stay-q.mp4', 'moviebg.mp4','cxk.mp4']
				$('#buttons').html(
					list.map((item,index)=>{
						return `<div class="col-md-2 animated" data-id="${index}">${item}</div>`
					}).join('')
				)
			</script>
		</div>
	</main>
	

	
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
		integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
		crossorigin="anonymous"></script>
	<script>
		let videoList = ['stay-b.mp4', 'stay-q.mp4', 'moviebg.mp4','cxk.mp4']
		function getVideo(id) {
			let url = `http://121.37.209.61:8080/upload/video/${id}`
			$('.embed-responsive-item').attr('src', url)
		}
		getVideo(videoList[0])

		//文字控件点击事件
		$('.controls').on('click', 'div', function (e) {
			console.log(e.target.getAttribute('id=', 'data-id'))
			let id = e.target.getAttribute('data-id')
			getVideo(videoList[id])
		}).on('mouseover', 'div', function (e) {
			console.log(e.target.classList);
			e.target.classList.add('pulse')
		}).on('mouseout', 'div', function (e) {
			e.target.classList.remove('pulse')
		})
	</script>
</body>

</html>